/* eslint-disable */
<template>
  <div class="chatroom" style="min-height: 350px;">
    <div
      class="msnList position-absolute left right overflow-auto px-4"
      style="top: 56px; bottom: 60px;"
    >
      <div class="listB">
        <!--发言-->
        <div class="conLeft">
          <h6 class="small text-light">
            <span class="font-weight-bold mr-1">晶晶老师</span>
            <span class="din_alternatebold opacity-50">10:21</span>
          </h6>
          <div class="d p1">大家好，今天这个课程非常好，大家一定好好听课，作好笔记！谢谢合作。</div>
        </div>
      </div>

      <div class="listB">
        <div class="conRight">
          <h6 class="small font-weight-bold">我</h6>
          <div class="d p1">今天这个课程非常好，大家一定好好听课，作好笔记</div>
        </div>
      </div>

      <div class="listB" v-for="o in 21">
        <div class="conLeft">
          <h6 class="small">
            <span class="badge badge-info mr-1">助教老师</span>
            <span class="font-weight-bold mr-1">飞飞老师</span>
            <span class="din_alternatebold opacity-50">10:21</span>
          </h6>
          <div class="d p1">大家一定好好听课，今天这个课程非常好，大家一定好好听课，作好笔记！</div>
        </div>
      </div>
    </div>
    <div class="position-absolute left right bottom pb-3 px-4 bottomInput">
      <!-- <div class="row">
                <div class="col-auto pr-0 pl-2">
                    <span class="iconfont lwfolder h2 hand"></span>
                </div>
                <div class="col px-2">
                    <el-input placeholder="与同学互动，请在这里输入内容！" v-model="input3" class=" rounded-100">
                        <el-button slot="append"  class="pr-3 pl-3" ><span class="iconfont lwsend h4"></span></el-button>
                   </el-input>

                </div>
      </div>-->
      <div class="bottom-input">
        <div class="row">
          <div class="col-auto pr-2">
            <span class="iconfont lwpicture h3"></span>
          </div>
          <div class="col pl-0">
            <el-input size="medium" placeholder v-model="input3" class="input-with-select">
              <el-button slot="append" icon="iconfont lwsend h4" class="px-2"></el-button>
            </el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Chatroom",
  data() {
    return {
      input3: "",
      radio: "2",
      imageUrl: "", // 上传头像图片
      form: {
        answerTitle: "",
        textarea: ""
      }
    };
  }
};
</script>

<style>
.msnList {
  bottom: 65px;
}

.listB {
  width: 100%;
  clear: both;
}

.msnList .d {
  border-radius: 6px;
  width: auto !important;
  padding: 10px;
  text-align: justify;
  word-break: break-all;

  /* 只对英文起作用，以字母作为换行依据 */
}
@media (min-width: 768px) {
  .msnList .d {
    font-size: 0.8rem;
    /* 只对英文起作用，以字母作为换行依据 */
  }
}

.msnList .conLeft {
  padding: 10px 0 20px 0;
  max-width: 75%;
  float: left;
}

.msnList .conLeft .d {
  background-color: #cdcfe0;
  color: #0f0f0f;
  float: left;
  border-top-left-radius: 0;
}

.msnList .conLeft.tszh > .small {
  color: #fd475b;
  font-weight: 600;
}

.msnList .conLeft.tszh .d {
  background-color: #fd475b;
  color: #ffffff;
}

.msnList .conRight {
  padding: 10px 0 20px 0;
  max-width: 75%;
  float: right;
}

.msnList .conRight h6 {
  text-align: right;
}

.msnList .conRight .d {
  margin-left: auto;
  margin-right: 0;
  background-color: #285193;
  border-top-right-radius: 0;
}

.bottomInput .el-input-group__append {
  border-radius: 0 100px 100px 0;
  background-color: rgb(7, 13, 24);
  border-color: rgb(7, 13, 24);
}

.bottomInput .el-input .el-input__inner,
.bottomInput .el-input-group__prepend {
  border-radius: 100px 0 0 100px;
  background-color: rgb(7, 13, 24);
  border-color: rgb(7, 13, 24);
}
.chatroom .bottom-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  padding: 0 10px 12px;
}
.chatroom .bottom-input .el-input-group--append .el-input__inner {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: #fff;
}
.chatroom .bottom-input .el-input-group__append {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: #fff;
}
</style>